import React, { useState } from "react";
import { useEffect } from "react";
import { FC } from "react";
import {
  AUDIO_STATUS_PAUSED,
  AUDIO_STATUS_PLAYED,
} from "../../../models/audio";
import "./disk.css";
interface IProps {
  imageUrl: string;
  onClick: () => void;
  audioStatus: string;
}
const Disk: FC<IProps> = ({ imageUrl, onClick, audioStatus }) => {
  const [distImageClass, setDistImageClass] = useState<string>("disk-image");
  useEffect(() => {
    if (audioStatus === AUDIO_STATUS_PLAYED) {
      setDistImageClass("disk-image disk-image-animate");
    } else if (audioStatus === AUDIO_STATUS_PAUSED) {
      setDistImageClass("disk-image disk-image-animate disk-image-paused");
    } else {
      setDistImageClass("disk-image");
    }
  }, [audioStatus]);
  return (
    <div className="disk" onClick={onClick}>
      <img className={distImageClass} src={imageUrl} alt="" />
    </div>
  );
};

export default Disk;
